<!-- 新增(编辑)字典 -->
<template>
  <el-dialog
    v-model="props.dialogVisible"
    :title="props.dialogForm?.title"
    :width="props.dialogForm?.width"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <el-form :model="purForm" :rules="rules" ref="purFormRef">
      <el-form-item label="设备型号" prop="modelName">
        <el-input
          v-model="purForm.modelName"
          autocomplete="off"
          style="width: 100%"
          maxlength="16"
          show-word-limit
          placeholder="请输入设备型号"
        />
      </el-form-item>
      <!-- <el-form-item >
                <div style="line-height: 15px;">提示：以汉字、数字、字母组成；<p></p>
                    不能以数字开头，且不包含特殊字符</div>
            </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel(purFormRef)">取消</el-button>
        <el-button type="primary" @click="submitForm(purFormRef)">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { ref, reactive, defineAsyncComponent, watch } from 'vue'
import { addDeviceModel, editDeviceModel } from '/@/api/setting/index'

const props = defineProps({
  dialogVisible: Boolean,
  dialogForm: Object,
  dialogDetail: Object
})
const emit = defineEmits(['cancel', 'submit'])
const formLabelWidth = ref('95px')
const purFormRef = ref<FormInstance>()
const purForm = ref<any>({
  configValue: '',
  parentId: '0'
})

watch(
  () => props.dialogVisible,
  () => {
    if (!props?.dialogDetail?.id) {
      purForm.value = {}
    } else {
      purForm.value = JSON.parse(JSON.stringify(props?.dialogDetail))
    }
  },
  { immediate: true }
)

const validNameType = (rule: any, value: any, callback: any) => {
  // var regex = new RegExp('^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z])(([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[-_a-zA-Z0-9]){0,11})$')
  var regex = new RegExp(
    '^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z])(([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9]){0,11})$'
  )
  if (value === '') {
    callback(new Error('请输入内容'))
  } else if (!regex.test(value)) {
    // callback(new Error('只支持以中文或英文开头，且不包含特殊符号'))
    callback(new Error('请输入正确格式的设备型号名称'))
  } else {
    callback()
  }
}

const rules = reactive<FormRules>({
  modelName: [
    { required: true, message: '请输入设备型号', trigger: 'blur' }
    // { required: true, validator: validNameType, trigger: 'blur' }
  ]
})

const cancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  emit('cancel')
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (!props?.dialogDetail?.id) {
        purForm.value.deviceType = props?.dialogDetail?.deviceType
        addDeviceModel(purForm.value).then((res) => {
          if (res.code == 0) {
            ElMessage.success(`添加成功！`)
            emit('submit')
          }
        })
      } else {
        purForm.value.id = props?.dialogDetail?.id
        delete purForm.value.companyId
        delete purForm.value.createTime
        delete purForm.value.updateTime
        editDeviceModel(purForm.value).then((res) => {
          if (res.code == 0) {
            ElMessage.success(`编辑成功！`)
            emit('submit')
          }
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>
<style scoped lang="scss">
.elrowClass {
  margin-bottom: 16px;
}

.tips {
  font-size: 13px;
  font-weight: 400;
  line-height: 21px;
  color: rgba(140, 140, 140, 1);
  text-align: left;
}
</style>
<style>
.el-dialog__title {
  font-size: 20px !important;
  font-weight: 700 !important;
}
</style>
